import { Button, Form } from 'antd';
import { useNavigate } from 'react-router-dom';
import type { YmColumnsType } from 'ym-design';
import { YmTable } from 'ym-design';
import { getPhoneLogsList, PhoneLogsListType } from './data';
const PhoneLogs: React.FC<any> = () => {
  const [form] = Form.useForm();
  const navigator = useNavigate();
  // 初始化字段定义
  const columns: YmColumnsType<PhoneLogsListType> = [
    {
      title: '操作',
      dataIndex: 'operate',
      key: 'operate',
      render(value: number, record: any) {
        return (
          <Button
            type="text"
            size="small"
            onClick={(e: React.MouseEvent) => {
              e.stopPropagation();
              navigator(`/recruit/PhoneDetail?driverId=${record.driverId}&belongEntId=${record.belongEntId}`);
            }}
          >
            <span className="safe-edu_table_operation_text">详情</span>
          </Button>
        );
      },
      width: 60,
    },
    {
      title: '拨打企业',
      dataIndex: 'belongEntName',
      key: 'belongEntName',
      ellipsis: true,
      width: 140,
    },
    {
      title: '简历',
      dataIndex: 'resumeInfo',
      key: 'resumeInfo',
      width: 140,
    },
    {
      title: '是否免费',
      dataIndex: 'freeFlag',
      key: 'freeFlag',
      width: 80,
      render(value) {
        return <div>{value == 1 ? '收费' : '免费'}</div>;
      },
    },
    {
      title: '简历金额（元）',
      dataIndex: 'amount',
      width: 140,
      key: 'amount',
      render(value: number) {
        if (value) return <div>{(value / 100).toFixed(2)}</div>;
        else return '--';
      },
    },
    {
      title: '付款时间',
      dataIndex: 'payTime',
      key: 'payTime',
      width: 140,
    },
    {
      title: '付款人',
      dataIndex: 'payerName',
      key: 'payerName',
      width: 140,
      render(value: string, record: any) {
        return <div>{value || record.payerPhone ? value + ' ' + record.payerPhone : '--'}</div>;
      },
    },

    {
      title: '最新拨打记录',
      dataIndex: 'latestCallRecordsTime',
      key: 'latestCallRecordsTime',
      width: 140,
    },
    {
      title: '是否接通',
      dataIndex: 'isConnected',
      key: 'isConnected',
      width: 140,
      render(value) {
        return <div>{value == 1 ? '是' : '否'}</div>;
      },
    },
    {
      title: '通话时长',
      dataIndex: 'callDuration',
      key: 'callDuration',
      width: 140,
    },
  ];
  // 不用监听，不可能用户一直改变浏览器大小
  const pageWidth = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
  return (
    <div className="safe_boss_page">
      <YmTable
        wrapperStyle={{ background: '#FFF' }}
        searchForm={{
          formItems: [
            {
              label: '司机姓名',
              name: 'personName',
              valueType: {
                type: 'input',
                inputProps: {
                  placeholder: '请输入司机姓名',
                },
              },
            },
            {
              label: '司机手机号',
              name: 'personPhone',
              labelCol: { span: 8 },
              valueType: {
                type: 'input',
                inputProps: {
                  placeholder: '请输入司机手机号',
                },
              },
            },
            {
              label: '拨打企业',
              name: 'belongEntName',
              valueType: {
                type: 'input',
                inputProps: {
                  placeholder: '请输入拨打企业',
                },
              },
            },
          ],
          span: pageWidth < 1320 ? 12 : 6,
          labelCol: { style: { width: 108 } },
          form: form,
        }}
        columns={columns}
        request={async ({ page }, form) => {
          const { current = 1, pageSize = 10 } = page ?? {};
          const response = await getPhoneLogsList({
            pageIndex: current,
            pageSize,
            ...form,
          });
          console.log(response, '打印看看结果');
          return response;
        }}
        requestOptions={{
          reFreshDep: [],
        }}
        rowKey="eventId"
      />
    </div>
  );
};
export default PhoneLogs;
